<template>
  <div class="settings-page">
    <div style="width: 100%;">
      <van-icon
          style="position:fixed;top: 20px;left: 20px;cursor: pointer;border-radius: 50%"
          name="arrow-left" color="black"
          size="30px" @click="back"/>
    </div>
    <div class="header">
      <i class="fa-solid fa-arrow-left back-btn"></i>
      <span class="title">设置</span>
    </div>
    <ul class="settings-list">
      <li @click="privacyPolicy">
        <van-icon class="fa-solid fa-bell bell-icon" size="25px" name="chat-o" />
        <span class="text">隐私政策</span>
      </li>
      <li @click="helpAndSupport">
        <van-icon class="fa-solid fa-circle-exclamation help-icon" size="25px" name="warning-o" />
        <span class="text">帮助和支持</span>
      </li>
      <li class="logout-li" @click="cancelYourAccount">
        <van-icon class="fa-solid fa-power-off logout-icon" size="25px" name="cross" />
        <span class="s1">注销账户</span>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
    };
  },
  methods: {
    back() {
      this.$router.push("/my")
    },
    privacyPolicy() {
      alert("隐私政策")
    },
    helpAndSupport() {
      this.$router.push({ name: 'chatmodel' });
    },
    cancelYourAccount() {
      localStorage.removeItem("currentUser")
      this.$message.success("注销成功");
      this.$router.push("/login")
    }
  }
}
</script>

<style>
.settings-page {
  background-color: white;
  padding: 20px;
}
.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}
.back-btn {
  font-size: 20px;
  color: black;
}
.title {
  font-size: 18px;
  font-weight: bold;
}
.settings-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.settings-list li {
  display: flex;
  align-items: center;
  padding: 15px 0;
  border-bottom: 1px solid #e0e0e0;
}
.bell-icon,
.help-icon,
.logout-icon {
  font-size: 18px;
  margin-right: 15px;
  color: black;
}
.logout-li,
.logout-icon {
  color: red;
}
.text {
  font-size: 16px;
  color: black;
  font-weight: bold;
}
.s1{
  color: red;
  font-size: 16px;
  font-weight: bold;
}
</style>